<template>
  <el-container class="app-container">
    <el-aside width="200px" class="aside">
      <el-menu
        mode="vertical"
        :router="true"
        class="nav-menu"
        :default-active="$route.path">
        <el-menu-item index="/" @click="addTab('/', '首页')">
          <el-icon><home-filled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><picture-filled /></el-icon>
            <span>图片区域</span>
          </template>
          <el-menu-item index="/image-compressor" @click="addTab('/image-compressor', '图片压缩')">
            <el-icon><picture /></el-icon>
            <span>图片压缩</span>
          </el-menu-item>
          <el-menu-item index="/qr-code-reader" @click="addTab('/qr-code-reader', '二维码识别')">
            <el-icon><camera /></el-icon>
            <span>二维码识别</span>
          </el-menu-item>
          <el-menu-item index="/qr-code-generator" @click="addTab('/qr-code-generator', '二维码生成')">
            <el-icon><plus /></el-icon>
            <span>二维码生成</span>
          </el-menu-item>
          <el-menu-item index="/base64-converter" @click="addTab('/base64-converter', 'Base64转换')">
            <el-icon><picture /></el-icon>
            <span>Base64转换</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><document /></el-icon>
            <span>文档区域</span>
          </template>
          <el-menu-item index="/pdf-to-word" @click="addTab('/pdf-to-word', 'PDF转Word')">
            <el-icon><document /></el-icon>
            <span>PDF转Word</span>
          </el-menu-item>
          <el-menu-item index="/json-formatter" @click="addTab('/json-formatter', 'JSON格式化')">
            <el-icon><data-analysis /></el-icon>
            <span>JSON格式化</span>
          </el-menu-item>
          <el-menu-item index="/encryption" @click="addTab('/encryption', '加密解密')">
            <el-icon><lock /></el-icon>
            <span>加密解密</span>
          </el-menu-item>
          <el-menu-item index="/json-to-csharp" @click="addTab('/json-to-csharp', 'JSON转C#')">
            <el-icon><document /></el-icon>
            <span>JSON转C#</span>
          </el-menu-item>
          <el-menu-item index="/diff-tool" @click="addTab('/diff-tool', '文档对比')">
            <el-icon><document /></el-icon>
            <span>文档对比</span>
          </el-menu-item>

        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container class="main-container">
      <div class="content-wrapper">
        <el-tabs
          v-model="activeTab"
          type="card"
          @tab-remove="removeTab"
          @tab-click="handleTabClick"
          class="main-tabs">
          <el-tab-pane
            v-for="item in tabs"
            :key="item.path"
            :label="item.title"
            :name="item.path"
            :closable="item.path !== '/'"
          >
            <div class="tab-content-container">
              <router-view v-show="activeTab === item.path">
                <template #default="{ Component }">
                  <keep-alive>
                    <component :is="Component" />
                  </keep-alive>
                </template>
              </router-view>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { PictureFilled, Picture, Document, Camera, Plus, DataAnalysis, Lock, HomeFilled } from '@element-plus/icons-vue'
import '@/assets/reset.css'

const router = useRouter()
const route = useRoute()
const activeTab = ref('/')
const tabs = ref([{ path: '/', title: '首页' }])

const menuItems = {
  '/': '首页',
  '/image-compressor': '图片压缩',
  '/qr-code-reader': '二维码识别',
  '/qr-code-generator': '二维码生成',
  '/base64-converter': 'Base64转换',
  '/pdf-to-word': 'PDF转Word',
  '/json-formatter': 'JSON格式化',
  '/encryption': '加密解密',
  '/json-to-csharp': 'JSON转C#',

}

onMounted(() => {
  const currentPath = route.path
  const title = menuItems[currentPath]
  if (title) {
    addTab(currentPath, title)
  } else {
    router.push('/')
  }
})

const addTab = (path, title) => {
  const existingTab = tabs.value.find(tab => tab.path === path)
  if (!existingTab) {
    tabs.value.push({ path, title })
  }
  activeTab.value = path
  router.push(path)
}

const removeTab = (targetPath) => {
  if (targetPath === '/') return
  const currentTabs = tabs.value
  let activePath = activeTab.value
  
  if (activePath === targetPath) {
    const targetIndex = currentTabs.findIndex(tab => tab.path === targetPath)
    const nextTab = currentTabs[targetIndex + 1] || currentTabs[targetIndex - 1]
    if (nextTab) {
      activePath = nextTab.path
      router.push(activePath)
    }
  }
  
  activeTab.value = activePath
  tabs.value = currentTabs.filter(tab => tab.path !== targetPath)
}

const handleTabClick = (tab) => {
  activeTab.value = tab.props.name
  router.push(tab.props.name)
}
</script>

<style>
.app-container {
  height: 100vh;
  background-color: #f0f2f5;
}

.aside {
  background-color: #001529;
  @apply shadow-xl transition-all duration-300 ease-in-out;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu {
  height: 100vh;
  border-right: none;
  background-color: #001529;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-menu::-webkit-scrollbar {
  display: none;
}

.el-menu-item,
.el-sub-menu__title {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  @apply transition-all duration-300 ease-in-out transform hover:scale-105;
  background-color: #001529;
}

.el-menu-item:hover,
.el-sub-menu__title:hover,
.el-menu-item.is-active {
  color: #fff !important;
  background-color: #1890ff !important;
  @apply shadow-lg transform scale-105;
}

.el-sub-menu .el-menu-item {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: #00284d !important;
  padding-left: 40px !important;
  @apply transition-all duration-200 ease-in-out;
}

.el-sub-menu .el-menu-item:hover,
.el-sub-menu .el-menu-item.is-active {
  color: #fff !important;
  background-color: #1890ff !important;
}

.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
  color: inherit;
  font-size: 18px;
  margin-right: 12px;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  border-radius: 0;
  margin: 0;
  padding: 0;
  @apply transition-all duration-300 ease-in-out hover:shadow-lg;
}

.content-wrapper {
  flex: 1;
  padding: 0;
  overflow: hidden;
}

.aside {
  background-color: #001529;
  border-right: none;
}

.content-wrapper {
  flex: 1;
  padding: 6px;
  overflow: hidden;
  @apply transition-all duration-300 ease-in-out;
}

.main-tabs {
  height: 100%;
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 8px 16px 0;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

:deep(.el-tabs__nav) {
  border: none !important;
}

:deep(.el-tabs__item) {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
  border: 1px solid #e4e7ed !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0;
  background-color: #fff;
  @apply transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md;
  margin-right: 4px;
}

:deep(.el-tabs__item.is-active) {
  color: #1890ff;
  border-bottom-color: transparent !important;
  font-weight: 500;
}

:deep(.el-tabs__item:hover) {
  color: #1890ff;
}

:deep(.el-tabs__content) {
  padding: 24px;
  height: 100%;
  overflow: hidden;
}

.tab-content-container {
  height: calc(100vh - 145px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.tab-content-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

:deep(.el-tabs__nav-wrap) {
  padding: 0;
}

:deep(.el-tabs__item) {
  height: 32px;
  line-height: 32px;
}

.el-sub-menu:hover .el-sub-menu__title {
  color: var(--el-color-primary);
  transition: color 0.3s ease;
}

.el-menu-item.is-active {
  color: #fff !important;
  background-color: #1890ff !important;
}

.el-menu-item {
  padding: 0 20px;
  transition: all 0.3s ease;
}
</style>